<template>
    <el-dialog  v-model="show" title="派单逻辑修改" width="970" align-center>
        <div class="item item-active">
            <div class="left">
                <div class="title">
                    <span class="name">自动派单给设备所属补货员</span>
                    <span class="desc">（适合中小型运营商，由补货员进行设备维护） </span>
                </div>
                <div class="content">
                    当设备出现报警后，系统自动生成报警工单给设备的补货员，并提供相应的解决方案给到补货员进行排查
                </div>
            </div>
            <div class="right">
                <el-icon><Check /></el-icon>
            </div>
        </div>
        <div class="item">
            <div class="title">
                <span class="name">自动派单给设备所属补货员</span>
                <span class="desc">（适合中小型运营商，由补货员进行设备维护） </span>
            </div>
            <div class="content">
                当设备出现报警后，系统自动生成报警工单给设备的补货员，并提供相应的解决方案给到补货员进行排查
            </div>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <div>
                    <el-button @click="close()">取消</el-button>
                    <el-button type="primary" @click="submit(ruleFormRef)" color="#0071bb">确定</el-button>
                </div>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { defineEmits } from 'vue';
import { Check } from '@element-plus/icons-vue'
const emit = defineEmits(['close','submit']);
const show = ref(true)
// 提交
const submit = () => {
    emit('submit')
}
// 取消
const close = () => {
    emit('close')
}
</script>

<style scoped lang="scss">
.item{
    border: 1px solid #f1f1f1;
    padding: 20px 30px;
    box-sizing: border-box;
    font-size: 16px;
    border-radius: 10px;
    margin-bottom: 14px;
    .title{
        font-weight: 500;
        font-size: 18px;
        margin-bottom: 10px;
        .name{
            color: #000;
        }
    }
}
.item-active{
    display: flex;
    padding: 0;
    .left{
        padding: 20px 0 30px 30px;
        box-sizing: border-box;
        width: calc(100% - 80px);
    }
}
.right{
        width: 100px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        background: #f0a93e;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
    }

</style>